<template>
  <zeda-dialog
    v-model="visible"
    title="园区范围选取"
    width="800px"
    :before-close="handleClose"
  >
    <gdMap
      :data="tableData"
      :initStart="visible"
      @result="amapgetLatlng"
    ></gdMap>
    <form-button
      slot="footer"
      :loading="loading"
      :submitText="'确定'"
      @cancel="handleClose"
      @submit="submit"
    >
    </form-button>
  </zeda-dialog>
</template>

<script>
import { detail, add, edit } from "@/api/basicdata/monthlyFlowing";

import CascaderSelect from "@/components/Select/CascaderSelect";
import FormButton from "@/components/FormButton";
import gdMap from "@/components/gdMap/index.vue";

export default {
  dicts: [],
  components: {
    FormButton,
    CascaderSelect,
    gdMap,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false, // 按钮加载中判断
      tableData: [], // 传入的data
      arr: [],
    };
  },
  watch: {
    visible(value) {
      if (value) {
        this.tableData = this.data;
      }
    },
  },
  methods: {
    // 坐标集
    amapgetLatlng(e) {
      this.arr = e.fenceData;
    },
    submit() {
      this.$emit("result", this.arr);
      this.handleClose();
    },
    handleClose(status) {
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>

<style scoped lang="scss"></style>
